<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta content="charset=utf-8">
	<title>FlexSlider 2</title>
	
  <!-- Syntax Highlighter -->
	<!-- Demo CSS -->
	<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
	
	<!-- Modernizr -->
  
</head>
<body class="loading">
  <div id="container" class="cf">
	<div id="main" role="main">
		<section class="slider">
        <div id="slider" class="flexslider">
          <ul class="slides">
            <li>
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    	</li>
  	    	<li>
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
  	    	</li>
  	    	<li>
  	    	    <img src="images/kitchen_adventurer_donut.jpg" />
  	    	</li>
  	    	<li>
  	    	    <img src="images/kitchen_adventurer_caramel.jpg" />
  	    	</li>
            <li>
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    	</li>
  	    	<li>
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
  	    	</li>
  	    	<li>
  	    	    <img src="images/kitchen_adventurer_donut.jpg" />
  	    	</li>
  	    	<li>
  	    	    <img src="images/kitchen_adventurer_caramel.jpg" />
  	    	</li>
            <li>
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    	</li>
  	    		<li>
  	    	<img src="images/kitchen_adventurer_lemon.jpg" />
  	    	</li>
  	    	<li>
  	    	    <img src="images/kitchen_adventurer_donut.jpg" />
  	    	</li>
  	    	<li>
  	    	    <img src="images/kitchen_adventurer_caramel.jpg" />
  	    	</li>
          </ul>
        </div>
        <div id="carousel" class="flexslider">
          <ul class="slides">
            <li>
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_donut.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_caramel.jpg" />
  	    		</li>
            <li>
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_donut.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_caramel.jpg" />
  	    		</li>
            <li>
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_donut.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_caramel.jpg" />
  	    		</li>
          </ul>
        </div>
		</section>
    </div>
  
  </div>
  
  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  <!-- FlexSlider -->
  <script defer src="../jquery.flexslider.js"></script>
  
  <script type="text/javascript">
    $(window).load(function(){
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'
      });
      
      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>
  
</body>
</html>